<template>
<div>
    <el-container>
        <el-header>
            <el-menu :default-active="headerIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item v-for="(item,index) in nav" :key="item.path" :index=item.path >{{item.name}}</el-menu-item>
            </el-menu>
        </el-header>
        <el-container>
            <el-aside width="300px">
                <el-menu :router="true" class="el-menu-vertical-demo"
                         @open="handleOpen"  @close="handleClose" @select="childrenSelect"
                         default-active="permissions"
                         :default-active="asideIndex"
                >

                    <template v-for="(item,index) in childrenNav" >

                        <el-submenu v-if="item.children"  :index="item.path" open="permissions">
                            <template slot="title">
                                <i class="el-icon-location"></i><span>{{item.path}}{{item.name}}</span>
                            </template>
                            <el-menu-item v-for="(value,key) in item.children" :index="'/'+item.path+'/'+value.path">{{value.name}}</el-menu-item>
                        </el-submenu>

                        <el-menu-item v-else :index="item.path" >
                            <i class="el-icon-setting"></i><span slot="title">{{item.name}}</span>
                        </el-menu-item>

                    </template>

                </el-menu>




            </el-aside>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</div>
</template>

<script>
import * as Ajax from '@/plugins/Home'; // 引入axios 目的结构化管理

// 模拟Json 导航, 本变量没有使用, 更直观的观察 对象结构
const strJosn = [
  {
    name: 'home',
    path: 'studentLearning',
    children: [
      {
        name: '学员',
        path: 'student',
        children: [
          {
            name: '添加学员',
            path: 'addStudent',
          }
        ]
      },
      {
        name: '院校',
        path: 'school',
        children: [
          {
            name: '江西师范大学',
            path: 'jxsf',
          },
          {
            name: '井冈山大学',
            path: 'jgs',
          },
          {
            name: '江西科技学院',
            path: 'jxkj',
          }
        ]
      },

    ]
  },
  {
    name: '系统',
    path: 'systemSettings',
    children: [
      {
        name: '权限',
        path: 'permissions',
        children: [
          {
            name: '管理员列表',
            path: 'administratorList',
          },
          {
            name: '角色管理',
            path: 'roleManagement',
          },
          {
            name: '权限资源管理',
            path: 'accessResources',
          },
          {
            name: 'admin添加MCA',
            path: 'adminAddMCA',
          },
        ]
      }
    ]
  },
  {
    name: '定时',
    path: 'timingTask',
    children: [
      {
        name: '云提醒',
        path: 'cloudRemind',
        children: [
          {
            name: '定时列表',
            path: 'timingList',
          }
        ]
      }
    ]
  },
]



export default {
name: 'home',
data() {
  return {
    nav:[],
    headerIndex:'',
    asideIndex:'/permissions/adminAddMCA',
    childrenNav:[],
  }
},
created(){

  Ajax.nav()
    .then(res => {
      this.nav = res;
      this.headerIndex = this.nav[0].path
      this.childrenNav = this.nav[0].children

      { // 默认选择这个 上线删除
        this.headerIndex = this.nav[1].path
        this.childrenNav = this.nav[1].children
      }

    })

},
methods: {

  handleSelect(key, keyPath){
    this.headerIndex=key;
    this.nav.map((value,index)=>{
      if (value.path === key ) {
        this.childrenNav=this.nav[index].children
      }
    })
  },
  childrenSelect(key, keyPath){
    console.log("childrenSelect",key, keyPath)
  },
  handleOpen(key, keyPath) {
    console.log(this.asideIndex)
    console.log('handleOpen',key, keyPath);
  },
  handleClose(key, keyPath) {
    // console.log('handleClose',key, keyPath);
  },

}
}
</script>
<style>
</style>
